@use "sass:math";

$height-share-header: 70px;
$height-weather: 35px; // category line height
$meta-padding: 5px;
$height-temperature: $height-share-header - $height-weather - $meta-padding * 2;

.back-link{
  margin-top: 30px;
  color: $color-main;
  text-align: center;
  @extend .btn-like;
  font-size: $fz-note;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    display: block;
    width: 40px;
  }
}

.share-container{
  //background-image: url();
  background-image: url();
  background-attachment: fixed;
  padding: 60px 0 100px;
}

.share{
  padding: 60px;
  width: $grid-separate-width-sm;
  margin: 0 auto;
  border-top: 1px solid lighten($color-border, 2%);
  border-left: 1px solid lighten($color-border, 2%);
  @include border-radius(3px);
  background-color: $bg-share;
  @include box-shadow(2px 2px 5px rgba(0,0,0,0.2))
}

.share-head{
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.divider{
  margin: 30px 0;
  width: 100%;
  height: 1px;
  background-color: $color-border-highlight;
}

.share-date{
  border: 1px solid $color-border;
  padding: $meta-padding 15px;
  background-color: white;
  flex-shrink: 0;
  margin-right: 30px;
  .above{
    h3{
      line-height: $height-weather
    }
    display: flex;
    justify-content: space-between;
  }
  .bottom{
    line-height: $height-temperature;
  }
}

.share-meta{
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  .weather{
    width: $height-weather;
    img{
      width: 100%;
      display: block;
    }
  }
  .temperature{
    line-height: $height-temperature;
    text-align: center;
  }
}
.share-title{
  font-size: 1.2rem;
  line-height: math.div($height-share-header, 2);
  flex-grow: 1;
  margin-right: 20px;
}

.share-content{
  p{
    font-size: 1rem;
    line-height: 1.6;
    text-indent: 2rem;
    margin-bottom: 1.3rem;
  }
}

.share-category{
  $margin: 5px;
  color: white;
  font-weight: bold;
  @include border-radius(3px);
  margin: $margin 0;
  line-height: $height-weather - $margin * 2 - 3 * 2;
  padding: 3px 8px;
}

@each $name, $color in $categories {
  .share-category-#{$name}{
    background-color: $color;
  }
}

.no-diary{
  height: 100%;
  font-size: 2rem;
  color: $text-title;
  text-align: center;
  a{
    font-size: 1rem;
    color: inherit;
    &:hover{
      text-decoration: underline;
    }
  }
}


@media (min-width: $grid-separate-width-big) {
  .share{}
}

@media (min-width: $grid-separate-width-md) and (max-width: $grid-separate-width-big) {
  .share{}
}

@media (min-width: $grid-separate-width-sm) and (max-width: $grid-separate-width-md) {
  .share {}
}

@media (max-width: $grid-separate-width-sm){
  .share-container{
    padding: 60px 20px 100px;
  }
  .share{
    border: none;
    padding: 20px;
    width: 100%;
  }
  .share-head{
    flex-flow: column nowrap;
    .share-title{
      margin-bottom: 10px;
      margin-right: 0;
    }
    .share-meta{
      margin-right: 0;
      margin-bottom: 10px;
    }
    .share-date{
      margin-right: 0;
      margin-bottom: 10px;
    }
  }
  .divider{
    margin: 15px 0 30px;
    background-color: $color-border;
  }
  .share-meta{
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    .temperature{
      text-align: left;
    }
  }
}

@media (max-width: $grid-separate-width-xs) {
  .share-container{
    padding: 0;
  }
  .share{
    @include border-radius(0);
  }
  .share-meta{
    display: none;
  }
}

